:root {
  --header-height: 4.5rem;
}

html {
  @apply bg-light-500 text-true-gray-700;
}

html.dark {
  @apply bg-dark-800 text-gray-100;
}

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  @apply bg-purple-500 bg-opacity-75;

  position: fixed;
  @apply z-1031;
  top: 0;
  left: 0;

  width: 100%;
  @apply h-[2px];
}

.hover-transform {
  @apply transition transform duration-300 ease-in-out hover:-translate-y-px;
}

.basic-transition {
  @apply transition duration-300 ease-in-out;
}

.cursor-pen {
  cursor: url(https://api.iconify.design/mdi:lead-pencil.svg) 2 18, auto;
}

.select-dark {
  @apply block appearance-none w-full
    bg-gray-700 ring-1 ring-gray-800 ring-opacity-75
    px-8 py-2 pr-10 rounded
    leading-tight outline-none
    dark:bg-gray-800 focus:ring-opacity-100;
}

.icon-btn {
  @apply inline-block cursor-pointer select-none text-2xl
    opacity-75 transition duration-200 ease-in-out
    hover:opacity-100;
}

.d-header {
  @apply sticky top-0 w-full z-50 h-$header-height
  dark:bg-dark-300 bg-opacity-80 backdrop-filter backdrop-blur-lg
  bg-black text-white;
}

.d-container {
  @apply mx-auto max-w-screen-xl px-2 pt-8 lg:px-6 lg:pt-12;
}

input {
  @apply px-3 py-2 bg-dark-200 rounded outline-none focus:ring;
}

.btn {
  @apply py-2 px-4 bg-dark-100 rounded
    text-center font-medium uppercase text-white
    focus:outline-none focus:ring
    disabled:opacity-60 disabled:cursor-not-allowed;
}